<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <div id="app">
      <template></template>
    </div>
  </body>
  <script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
  <script lang="ts">
    var app = new Vue({
      el: "#app",
      data: {},
      mounted() {
        console.log("object", this.uniqueKey());
      },
      methods: {
        uniqueKey() {
          // 解构对于引用嵌套的属性或赋值目标没有限制。
          // 为此，可以通过解构来复制对象属性
          let person1 = {
            name: "Matt",
            age: 27,
            job: {
              title: "Software engineer",
            },
          };
          let { job: { title } } = person1;
          console.log('object', title);


          // 要创建 Person 的实例，应使用 new 操作符。以这种方式调用构造函数会执行如下操作。
          // (1) 在内存中创建一个新对象。
          // (2) 这个新对象内部的[[Prototype]]特性被赋值为构造函数的 prototype 属性。
          // (3) 构造函数内部的 this 被赋值为这个新对象（即 this 指向新对象）。
          // (4) 执行构造函数内部的代码（给新对象添加属性）。
          // (5) 如果构造函数返回非空对象，则返回该对象；否则，返回刚创建的新对象。
          // new 对象默认是有constructor属性的

          const nameKey = "name";
          const ageKey = "age";
          const jobKey = "job";
          let uniqueToken = 0;

          function getUniqueKey(key) {
            return `${key}_${uniqueToken++}`;
          }
          let person = {
            [getUniqueKey(nameKey)]: "Matt",
            [getUniqueKey(ageKey)]: 27,
            [getUniqueKey(jobKey)]: "Software engineer",
          };
          return person;
        },
      },
    });
  </script>
</html>
